<template>
  <!--    :title="!dataForm.id ? $t('add') : $t('update')"-->
  <el-dialog
    :append-to-body="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="visible"
    title="选择菜谱"
    width="50vw"
  >
    <div class="selected-recipes-wrapper">
      <h4>{{ selectRecipeTitle }}:</h4>

      <div class="selected-recipes">
        <el-tag
          :key="item.id"
          @close="removeRecipe(item)"
          class="selected-recipe-item"
          closable
          disable-transitions
          v-for="item in recipes"
        >{{ item.name }}
        </el-tag>
      </div>
    </div>
    <div class="recipe-table">
      <el-form @keyup.enter.native="getDataList()">
        <!--                v-if="$hasPermission('sys:user:save')"-->
        <el-form-item>
          <el-input
            placeholder="菜谱名称"
            v-model="dataForm.name">
            <el-button
              @click="getDataList()"
              slot="append">
              <i class="el-icon-search"/>
            </el-button>
          </el-input>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        @selection-change="dataListSelectionChangeHandle"
        height="800"
        v-loading="dataListLoading"
      >
        <el-table-column
          align="center"
          header-align="center"
          width="50">
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.checked"
              @change="recipeCheckChanged(scope.row)"
            />
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('mike.img')"
          align="center"
          header-align="center"
          width="120"
        >
          <template slot-scope="scope">
            <div
              class="text-center is-align-middle is-justify-center el-row--flex"
            >
              <midea-admin-image
                :height="100"
                :previewable="true"
                :url="scope.row.picUrl"
                :width="100"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('model.name')"
          align="center"
          header-align="center"
          prop="name"
        />
        <el-table-column
          :label="$t('model.description')"
          align="center"
          header-align="center"
          :show-overflow-tooltip="true"
          prop="abstruct"
        />
      </el-table>
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        @current-change="pageCurrentChangeHandle"
        @size-change="pageSizeChangeHandle"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>

    <template slot="footer">
      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
      <el-button
        @click="clickOnConfirmSelect()"
        type="primary">{{
          $t("confirm")
        }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import mixinViewModule from '@/mixins/mike.view-module'
// import remove from 'lodash/remove'

export default {
  name: 'CollectionRecipeSelect',
  mixins: [mixinViewModule],
  data () {
    return {
      visible: false,

      recipes: [],
      mixinViewModuleOptions: {
        getDataListURL: '/midea/menu/collection/content/menu/get'
        // getDataListIsPage: true
        // deleteURL: '/monitor/mmonitorapilist/',
        // deleteIsBatch: true
        // exportURL: '/sys/user/export'
      },

      dataForm: {
        sn8: '',
        name: ''
      }
    }
  },
  watch: {
    visible (newValue, oldValue) {
      if (!newValue) {
        // closed
        this.page = 1
        this.recipes = []
      }
    }
  },

  computed: {
    selectRecipeTitle () {
      return !this.recipes || this.recipes.length <= 0
        ? '请选择菜谱'
        : this.$t('mike.recipe_selected')
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.getDataList()
      })
    },
    handleResponseListData (data) {
      data = data.map(item => {
        let idx = this.recipes.findIndex(recipe => {
          return recipe.id === item.id
        })

        item.checked = idx >= 0
        return item
      })
      return data
    },

    recipeCheckChanged (item) {
      let idx = this.recipes.findIndex(recipe => {
        return recipe.id === item.id
      })
      if (item.checked && idx < 0) {
        // see if already in the recipes
        this.recipes.push(item)
      }

      if (!item.checked && idx >= 0) {
        this.removeRecipe(item)
      }
    },

    removeRecipe (item) {
      let idx = this.recipes.findIndex(recipe => {
        return recipe.id === item.id
      })

      this.recipes.splice(idx, 1)

      // remove(recipes, recipe => {
      //   return recipe.id === item.id
      // })
      //
      // this.$set(this.recipes, recipes)
      this.dataList.forEach(recipe => {
        if (recipe.id === item.id) {
          recipe.checked = false
        }
      })
    },
    clickOnConfirmSelect () {
      this.$emit('onCollectionRecipesSelected', this.recipes)

      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.recipe-table {
}

.selected-recipes-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;

  min-height: 32px;
  /*padding: 15px 0;*/

  h4 {
    flex: 1;
    margin: 0 0 15px 0;
  }

  .selected-recipes {
    flex: 6;

    max-height: 750px;
    overflow: auto;

    .selected-recipe-item {
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}
</style>
